<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    </style>
</head>
<body>

</body>
<script>

    // 创建一个手机

    // 手机
    // 特征（信息，属性）：
    // 品牌
    // 配置
    // 颜色
    // 大小
    // 重量
    // 功能（方法，函数）：
    // 打电话
    // 发短信
    // 拍照
    // 上网

    // 内聚
    // const phone = {
    //     品牌: "华为",
    //     配置: {
    //         cpu: "8核",
    //         ram: "8G",
    //         rom: "512G"
    //     },
    //     color:"白色",
    //     size:10,
    //     strong: "200g",
    //     call:function(){},
    //     sms:function(){},
    //     photo:function(){},
    //     online:function(){}
    // }

    // 耦合
    // 选项卡
    // 1. 获取元素
    // 2. 设置默认选中项的索引
    // 3. 绑定元素索引
    // 4. 绑定事件
    // 5. 清除上一个项
    // 6. 设置当前项（this）
    // 7. 将本次的当前项的索引设置为下一次的上一个

    // 相互依赖：耦合
    // 相互不依赖：尽量不产生耦合
    // 低耦合

    // 功能之间是否相互依赖

    // 内聚和耦合
    // 伪代码：不能执行，但是可以拿来体现逻辑思路

    const tab = {
        btns: document.querySelectorAll(".btns"),
        conts: document.querySelectorAll(".conts"),
        index: 0,
        init: function () {
            tab.addEvent();
            tab.addIndex();
        },
        addIndex: function () {
            for (let i = 0; i < tab.btns.length; i++) {
                tab.btns[i].index = i;
            }
        },
        addEvent: function () {
            for (let i = 0; i < tab.btns.length; i++) {
                tab.btns[i].onclick = function () {
                    tab.clearPrev(tab.index);
                    tab.setActive(this.index);
                    tab.setIndex(this.index);
                }
            }
        },
        clearPrev: function (prev) {
            tab.btns[prev].className = "";
            tab.conts[prev].style.display = "none";
        },
        setActive: function (now) {
            tab.btns[now].className = "active";
            tab.conts[now].style.display = "block";
        },
        setIndex: function (nowIndex) {
            tab.index = nowIndex;
        }
    }

    tab.init();


</script>
</html>